<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08 限时购</title>
    <style>
        .btn {
            position: relative;
        }

        #countDown {
            position: absolute;
            left: 55px;
            top: 50%;
            transform: translate(0, -58%);
        }
    </style>
</head>

<body>
    <h1>08 限时购</h1>
    <div class="goods">
        <img src="../img/g3.jpg" id="meinv">
        <h4>今年过节不收礼，只收美女</h4>
        <p class="price">价格: <span>10.0W</span></p>
        <div class="btn">
            <div id="countDown">xx天xx时xx分xx秒</div>
            <img src="../img/btn_buy0.jpg" id="btnBuy">
        </div>
    </div>
</body>
<script src="../common.js"></script>
<script>
    (function () {

        /*
            需求：限时购
                * 设置一个截止时间
                * 开启定时器：不断
                    * 截止时间 - 系统时间 == 时间差（毫秒）
                        * 时间差 <= 0 达到临界点
                        * 替换按钮和商品图片
                    * 毫秒转成指定格式：xx天xx时xx分xx秒
        */

        // 找节点
        var countDown = document.getElementById('countDown');
        var meinv = document.getElementById('meinv');
        var btnBuy = document.getElementById('btnBuy');

        // 设置一个截止时间
        var end = '2023-3-17 00:09:00';

        // 开启定时器
        function settime() {
            // 获取系统时间
            var nowtime = Date.now();
            var endtime = Date.parse(end);
            var dis = endtime - nowtime;
            var secs = parseInt(dis / 1000); // 毫秒转秒

            if (secs <= 0) { // 到临界点

                clearInterval(timer);
                // 替换图片
                btnBuy.src = '../img/btn_buy.jpg';
                meinv.src = '../img/g4.jpg'
                countDown.innerHTML = '';

            } else { // 没有到达临界值

                // 毫秒转成指定格式：xx天xx时xx分xx秒
                timeObj = time(secs);
                countDown.innerHTML = `${toDb(timeObj.days)}天${toDb(timeObj.hours)}时
                            ${toDb(timeObj.mins)}分${toDb(timeObj.seces)}秒`;
            }

            console.log(secs);

        };

        settime();

        var timer = setInterval(settime, 1000);

        function time(sec) {
            var secs = sec % 60; // 秒
            var min = parseInt(sec / 60) % 60; // 分
            var hour = parseInt(sec / 60 / 60) % 24; // 时
            var day = parseInt(sec / 60 / 60 / 24); // 天

            return {
                days : day,
                hours : hour,
                mins : min,
                seces : secs
            };
        }

    })();
</script>

</html>